<template>
  <div>
    <!--按钮-->
    <div class="el-button-group">
      <el-button type="primary" @click="addTimeVisible= true" style="margin-top: 10px" >新增上课时间</el-button>
    </div>

    <!--时间表格-->
    <el-table title="课程时间列表" :data="timeData" border stripe style="width: fit-content;margin:10px;">
<!--      <el-table-column fixed prop="id" label="id" width="50"></el-table-column>-->
<!--      <el-table-column fixed prop="time" label="周几" width="50"></el-table-column>-->
      <el-table-column fixed prop="timespan" label="节次" width="50"></el-table-column>
      <el-table-column fixed prop="beginTime" label="开始时间" width="100"></el-table-column>
      <el-table-column fixed prop="finishTime" label="结束时间" width="100"></el-table-column>
      <el-table-column
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="editTime(scope.row)" type="text" >编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm title="确定要删除这节课吗？" @confirm="delTime(scope.row.timespan)" >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--新增时间弹窗-->
    <el-dialog title="新增课程节次" :visible.sync="addTimeVisible" @closed="resetAddTime('addTimeForm',)" width="600px">
      <el-form :model="addTimeForm" :rules="addTimeRules" ref="addTimeForm">
        <el-form-item label="节次" prop="timespan" label-width="100px">
          <el-input v-model="addTimeForm.timespan" @input="change($event)"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="beginTime" label-width="100px">
          <el-input v-model="addTimeForm.beginTime" @input="change($event)"></el-input>
        </el-form-item>
        <el-form-item label="结束时间" prop="finishTime" label-width="100px">
          <el-input v-model="addTimeForm.finishTime" @input="change($event)"></el-input>
        </el-form-item>
      </el-form>
      <!--按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetAddTime('addTimeForm')">取 消</el-button>
        <el-button type="primary" @click="submitAddTime('addTimeForm')">提交</el-button>
      </div>
    </el-dialog>

    <!--编辑教室弹窗-->
    <el-dialog title="编辑课程时间" :visible.sync="editTimeVisible" @closed="resetEditTime('editTimeForm',)" width="600px">
      <el-form :model="editTimeForm" :rules="editTimeRules" ref="editTimeForm">
        <el-form-item label="节次" prop="timespan" label-width="100px">
          <el-input v-model="editTimeForm.timespan" @input="change($event)"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="beginTime" label-width="100px">
          <el-input v-model="editTimeForm.beginTime" @input="change($event)"></el-input>
        </el-form-item>
        <el-form-item label="结束时间" prop="finishTime" label-width="100px">
          <el-input v-model="editTimeForm.finishTime" @input="change($event)"></el-input>
        </el-form-item>
      </el-form>
      <!--按钮-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetEditTime('editTimeForm')">取 消</el-button>
        <el-button type="primary" @click="submitEditTime('editTimeForm')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "TimeArrange",
  data() {
    return {
      timeData:[],
      addTimeForm:{},
      editTimeForm:{},
      addTimeRules:{
        timespan:[
          {required: true, message: "请选择节次", trigger:'blur'},
          {pattern: /^(\d|[1]\d)$/ , message: "请输入正整数，且不超过19", trigger:'blur'}
        ],
        beginTime:[
          {required: true, message: "请输入开始时间", trigger:'blur'},
          {pattern: /^(20|21|22|23|\d|[1]\d):[0-5]\d$/ , message: "请输入正确格式，如：8:00,12:09,冒号是英文字符", trigger:'blur'}
        ],
        finishTime:[
          {required: true, message: "请选择结束时间", trigger:'blur'},
          {pattern: /^(20|21|22|23|\d|[1]\d):[0-5]\d$/ , message: "请输入正确格式，如：8:00,12:09,冒号是英文字符", trigger:'blur'}
        ],
      },
      editTimeRules:{},
      addTimeVisible: false,
      editTimeVisible: false,

    }
  },
  created() {
    this.getTimeList();
  },
  methods:{
    //强制刷新解决input无法输入问题
    change(){
      this.$forceUpdate();
    },
    //获得课程时间列表
    getTimeList(){
      this.$axios.get("/sys/time/list").then(res => {
        this.timeData = res.data.data;
      })
    },

    //新增时间表单
    submitAddTime(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('/sys/time/save',this.addTimeForm).then(res => {
            console.log(res.data)
            this.resetAddTime(formName)
            this.$message({
              showClose: true,
              message: '恭喜你，操作成功',
              type: 'success',
              onClose: () => {
                this.getTimeList()
              }
            });
          })
        } else {
          console.log('error submit!');
          return false;
        }
      });
    },
    //重设新增时间表单
    resetAddTime(formName){
      this.$refs[formName].resetFields();
      this.$refs[formName] = {}
      this.addTimeVisible = false
    },

    //编辑时间
    editTime(row){
      this.editTimeForm.timespan = row.timespan;
      this.editTimeForm.beginTime = row.beginTime;
      this.editTimeForm.finishTime = row.finishTime;
      this.editTimeVisible = true;
    },
    //提交编辑时间表单
    submitEditTime(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios.post('sys/time/update' ,this.editTimeForm)
              .then(res => {
                console.log(res.data)
                this.resetEditTime(formName)
                this.$message({
                  showClose: true,
                  message: '恭喜你，操作成功',
                  type: 'success',
                  onClose: () => {
                    this.getTimeList();
                  }
                });
              })
        } else {
          console.log('error submit!');
          return false;
        }
      });
    },
    //重设编辑时间
    resetEditTime(formName){
      this.$refs[formName].resetFields();
      this.$refs[formName] = {}
      this.editTimeVisible = false
    },

    //删除时间
    delTime(timespan){
      this.$axios.post("/sys/time/delete?",{timespan:timespan}).then(res => {
        console.log(res)
        this.$message({
          showClose: true,
          message: '删除成功',
          type: 'success',
          onClose: () => {
            this.getTimeList()
            //刷新一下
            window.Timeation.reload();
          }
        });
      })
    },

  }
}
</script>

<style scoped>

</style>